<template>
  <ul class="operate clearfix">
    <li class="fl" @click="operateMic">
      <img src="@/assets/videoCall/muted.png" v-show="!conferenceSettings.voiced" alt="" class="cp">
      <img src="@/assets/videoCall/notMuted.png" v-show="conferenceSettings.voiced" alt="" class="cp">
      <p>静音</p>
    </li>
    <li class="fl" @click="operateCamera">
      <img src="@/assets/videoCall/closeCamera.png" v-show="!conferenceSettings.camera" alt="" class="cp">
      <img src="@/assets/videoCall/openCamera.png" v-show="conferenceSettings.camera" alt="" class="cp">
      <p>摄像头</p>
    </li>
    <li class="fl" @click="hangUp">
      <img src="@/assets/videoCall/hangUp.png" alt="" class="cp">
      <p>挂断</p>
    </li>
  </ul>
</template>

<script>
import { sendSock } from '@/utils/socketSend'

export default {
  name: 'operate.vue',
  computed: {
    // 会议设置
    conferenceSettings () {
      return this.$store.state.conferenceRoom.conferenceSettings
    }
  },
  methods: {
    // 操作麦克风
    operateMic () {
      // 不需要通知对方 只在自己这边操作 对方有效果即可
      if (this.conferenceSettings.voiced) {
        this.tools.webRTC.muteMicPhone()
      } else {
        this.tools.webRTC.cancelMuteMicPhone()
      }
      this.$store.commit('conferenceRoom/set_conferenceSettings_voiced', !this.conferenceSettings.voiced)
    },
    // 操作摄像头
    operateCamera () {
      if (this.conferenceSettings.camera) {
        // 关闭摄像头
        sendSock({
          type: '2.1.12',
          body: {
            msg_id: this.$store.state.conferenceRoom.cf_id
          }
        })
        this.$store.commit('socket/set_operationReqId', 'closeCameraReqId')
      } else {
        // 打开摄像头
        sendSock({
          type: '2.1.13',
          body: {
            msg_id: this.$store.state.conferenceRoom.cf_id
          }
        })
        this.$store.commit('socket/set_operationReqId', 'openCameraReqId')
      }
    },
    // 挂断
    hangUp () {
      sendSock({
        type: '2.1.9',
        body: {
          msg_id: this.$store.state.conferenceRoom.cf_id
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.operate {
  width: 288px;
  height: 100px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 48px;
  z-index: 199;
  li {
    width: 64px;
    margin-right: 48px;
    font-size: 0;
    img {
      width: 64px;
      height: 64px;
    }
    p {
      font-size: 14px;
      margin-top: 12px;
      color: #fff;
      text-align: center;
    }

    &:last-child {
      margin-right: 0;
    }
  }
}
</style>
